<template>
    <div style="margin: 20px;">
        <div v-for="(order,index) in orderData" :key="index">
          <!-- 订单信息头部 -->
          <el-descriptions :title="`订单 ${index + 1} 信息`" :column="2" border>
            <el-descriptions-item label="订单编号">{{ order.commodityId}}</el-descriptions-item>
            <el-descriptions-item label="下单时间">{{ formatDate(order.createdAt) }}</el-descriptions-item>
            <el-descriptions-item label="收货人">{{ order.receiverName }} ({{ order.receiverPhone }})</el-descriptions-item>
            <el-descriptions-item label="地址">{{ order.addressInfo }}</el-descriptions-item>
            <el-descriptions-item label="支付状态">
              {{ paymentStatusText(order.paymentStatus) }}
            </el-descriptions-item>
            <el-descriptions-item label="发货状态">{{shippingStatusText(order.shippingStatus) }}</el-descriptions-item>
            <el-descriptions-item label="优惠后价格">￥{{order.discountedPrices}}</el-descriptions-item>
          </el-descriptions>
  
          <!-- 商品列表表格 -->
          <el-table :data="order.commodityDetails || []" style="width: 100%; margin-top: 20px;" stripe>
            <el-table-column prop="productName" label="商品名称"></el-table-column>
            <el-table-column prop="price" label="单价" width="180">
              <template #default="scope">￥{{ scope.row.price }}</template>
            </el-table-column>
            <el-table-column prop="quantity" label="数量" width="180"></el-table-column>
            <el-table-column label="描述" width="180">
              <template #default="scope">{{ scope.row.describe}}</template>
            </el-table-column>
            <el-table-column prop="notes" label="备注"></el-table-column>
          </el-table>
  
          <!-- 订单总金额 -->
          <div class="order-total" style="text-align: right; margin-top: 20px;">
            <span>订单总金额：￥{{ order.total }}</span>
            <el-button type="primary" v-if="order.paymentStatus === 1" @click="Refund(order)">退款</el-button>
          </div>
          <hr />
        </div>

    



        <el-dialog
        v-model="isShow1"
        title="确认支付？"
        width="500"
        
      >
        <span>
            <p>确认退款？</p>
            <p>订单编号：{{RefundForm.commodityId}}</p>
            <p>订单金额：{{RefundForm.amount}}</p>
        </span>

      
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="isShow1 = false">取消</el-button>
        <el-button @click="pay">确认退款</el-button>
      </div>
    </template>
  </el-dialog>





     
    </div>
  </template>
  
  <script>
  export default {
    name: 'OrderDetail',
    data() {
      return {
        orderData: {}, // 初始化为空数组
        RefundForm:{
            amount:0,
            commodityId:""
          },
          payUrl: "", // 生成的充值链接
          isShow1:false,
      };
    },
    methods: {
        pay(){
            this.$http.post('/order/commodity/refund',this.RefundForm).then(resp=>{
           // 将响应数据中的"data"属性值写入到文档中
              document.write(resp.data.data)
            })
          },
        Refund(obj){
            this.RefundForm.commodityId = obj.commodityId;
            this.RefundForm.amount = obj.discountedPrices;
            console.log(this.RefundForm);
            this.isShow1 = true;
        },
       
     
        selsectcommodity() {
    this.$http.post('/order/commodity/selsectalreadyshipped')
      .then(resp => {
    this.orderData = resp.data.data;
    console.log(this.orderData);
      });
  },
      formatDate(dateString) {
        if (!dateString) return '';
        const date = new Date(dateString);
        return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
      },
      paymentStatusText(status) {
        return status === 1 ? '已支付' : '未支付';
      },
      shippingStatusText(status) {
        const statusMap = ['未发货', '已发货', '已签收', '退货中', '已退货'];
        return statusMap[status] || '未知状态';
      }
    },
    mounted() {
      this.selsectcommodity();
    }
  };
  </script>
  
  <style scoped>
  /* 样式可以根据需要调整 */
  </style>